<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <a-row justify="center" align="middle">
        <a-col flex="100px">
          <div class="titleHeader" style="font-weight: bold">数据分析</div>
        </a-col>
        <a-col flex="auto">
          <div class="title_content">
            <!-- <span>统计周期：</span>
            <span><a-range-picker v-model:value="value1" /></span>
            <span>自定义</span>
            <span>最近7天</span>
            <span>最近14天</span> -->
            <span>统计周期：</span>
            <span
              ><a-range-picker :presets="rangePresets" @change="onRangeChange"
            /></span>
          </div>
        </a-col>
        <a-col flex="100px">
          <a-button
            size="middle"
            class="search_Button confirm"
            type="primary"
            :icon="h(ExportOutlined)"
            @click="exportDate"
            >导出数据</a-button
          >
        </a-col>
      </a-row>
    </a-card>
    <a-row justify="center" algin="middle" style="box-sizing: border-box">
      <a-col flex="auto">
        <div class="todo-item" v-for="(item, index) in todoItems" :key="index">
          <a-row :gutter="[8, 8]" class="todo_content marginTop8">
            <a-col :span="18">
              <a-card size="small" :bordered="false" class="box-card">
                <div class="marginTop12 dataOverview">
                  <a-row justify="center" algin="middle">
                    <a-col flex="auto">
                      <div class="a_col_date">
                        <SvgIcon
                          name="data-icon"
                          color="#4CC87E"
                          width="21px"
                          height="21px"
                        />
                        <div style="margin-left: 6px">
                          {{ item.newUsers }}
                        </div>
                      </div>
                    </a-col>
                    <a-col flex="70px">
                      <a-button
                        size="middle"
                        class="search_Button confirm"
                        type="primary"
                        :icon="h(ExportOutlined)"
                        @click="exportDate"
                        >导出数据</a-button
                      >
                    </a-col>
                  </a-row>
                </div>
                <EchartsComes :chartOption="item.option" :chartStyle="chartStyle" />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card size="small" :bordered="false" class="box-card1">
                <div v-if="item.option2">
                  <div class="pic_title" style="margin-left: 6px">
                    {{ item.newUsersChance }}
                  </div>
                  <EchartsComes :chartOption="item.option2" :chartStyle="chartStyle" />
                </div>
                <div v-else>
                  <div
                    class="chart-container"
                    v-for="(items, index) in item.list"
                    :key="index"
                  >
                    <div class="chart-item">
                      <div class="chart-title">
                        <div class="chart-label">{{ items.a }}</div>
                        <div class="chart-label">
                          <ExclamationCircleOutlined />
                        </div>
                      </div>
                      <div class="chart-value">{{ items.b }}</div>
                      <div class="chart-percentage">
                        日环比 {{ items.c }}<ArrowDownOutlined />
                      </div>
                    </div>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import EchartsComes from "./EchartsComes.vue";
import {
  reactive,
  ref,
  toRaw,
  h,
  onMounted,
  onUnmounted,
  onBeforeUnmount,
  watchEffect,
  nextTick,
} from "vue";
import { ExclamationCircleOutlined, ArrowDownOutlined } from "@ant-design/icons-vue";
import SvgIcon from "@/components/svgIcon.vue";
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import localeData from "dayjs/plugin/localeData";
dayjs.extend(weekday);
dayjs.extend(localeData);
// VChart
const chartOption = ref([
  {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      show: false,
      type: "category",
      data: [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun",
        "Thu1",
        "Fri1",
        "Sat1",
        "Sun1",
        "Sun2",
      ],
    },
    yAxis: {
      type: "value",
      show: false,
      axisLabel: {
        formatter: "{value} 次",
      },
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
        itemStyle: {
          color: "rgba(191, 234, 207, 1)",
        },
        type: "line",
        symbol: "none",
        areaStyle: {
          normal: {
            color: {
              type: "linear", //设置线性渐变
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
    ],
  },
]);
const chartStyle = {
  width: "100%",
  height: "327px",
};
const todoItems = ref([
  {
    title: "584",
    total: "总量: 1.89万",
    newUsers: "新增用户(人)",
    newUsersChance: "用户次留存率",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        top: "5%",
        left: "center",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        // show:false,
        type: "category",
        data: [
          "游戏1",
          "游戏2",
          "游戏3",
          "游戏4",
          "游戏5",
          "游戏6",
          "游戏7",
          "游戏8",
          "游戏9",
          "游戏10",
          "游戏11",
          "游戏12",
        ],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value}",
        },
      },
      series: [
        {
          name: "Google",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          name: "Bing",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
          itemStyle: {
            color: "rgba(76, 200, 126, 1)",
          },
          // type: "bar",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(76, 200, 126, 1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(76, 200, 126, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
    option2: {
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)",
      },
      legend: {
        // top: "5%",
        // left: "center",
        orient: "vertical",
        // right: "10%",
        bottom: 0,
        // align: "center",
        itemGap: 20, //数据上下的距离
        icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
        itemWidth: 5, // 设置宽度
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: true,
              position: "center",
              color: "#4c4a4a",
              formatter: "{total|" + 200 + "}" + "\n\r" + "{active|共发布活动}",
              rich: {
                total: {
                  fontSize: 35,
                  fontFamily: "微软雅黑",
                  color: "#454c5c",
                },
                active: {
                  fontFamily: "微软雅黑",
                  fontSize: 16,
                  color: "#6c7a89",
                  lineHeight: 30,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
          },

          labelLine: {
            show: false,
          },
          data: [
            // { value: 1048, name: 'Search Engine' },
            // { value: 735, name: 'Direct' },
            // { value: 580, name: 'Email' },
            { value: 484, name: "Union A" },
            { value: 300, name: "Video B" },
          ],
        },
      ],
    },
  },
  {
    title: "80128",
    total: "总量: 13.89万",
    newUsers: "活跃量(人)",
    newUsersChance: "新用户活跃量",
    dailyIncrease: "30%",
    list: [
      {
        a: "新用户",
        b: "28600",
        c: "3%",
      },
      {
        a: "老用户",
        b: "28600",
        c: "3%",
      },
      {
        a: "总用户",
        b: "28600",
        c: "3%",
      },
    ],
    option: {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        top: "5%",
        left: "center",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        // show:false,
        axisLabel: {
          formatter: "{value}",
        },
      },
      series: [
        {
          name: "Google",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [150, 230, 224, 218, 135, 147, 120],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          name: "Bing",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
          itemStyle: {
            color: "rgba(76, 200, 126, 1)",
          },
          // type: "bar",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(76, 200, 126, 1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(76, 200, 126, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "68128",
    total: "总量: 11.89万",
    newUsers: "下载量(次)",
    newUsersChance: "下载量",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        // show:false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        // show:false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 55],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
    option2: {
      title: {
        text: "40%",
        left: "center",
        top: 150,
        textStyle: {
          color: "#3C3C3C",
          fontSize: 25,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)",
      },
      legend: {
        // top: "5%",
        // left: "center",
        orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉
        // right: "10%",
        bottom: 0,
        // align: "center",
        itemGap: 5, //数据上下的距离
        icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
        itemWidth: 5, // 设置宽度
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          // label: {
          //   show: false,
          //   normal: {
          //     show: true,
          //     position: "center",
          //     color: "#4c4a4a",
          //     // formatter: "{total|" + 200 + "}" + "\n\r" + "{active|留存率}",
          //     rich: {
          //       total: {
          //         fontSize: 35,
          //         fontFamily: "微软雅黑",
          //         color: "#454c5c",
          //       },
          //       active: {
          //         fontFamily: "微软雅黑",
          //         fontSize: 16,
          //         color: "#6c7a89",
          //         lineHeight: 30,
          //       },
          //     },
          //   },
          //   emphasis: {
          //     label: {
          //       show: true,
          //       position: "right",
          //       fontSize: 40,
          //       fontWeight: "bold",
          //     },
          //   },
          // },
          labelLine: {
            show: false,
          },
          data: [
            // { value: 1048, name: 'Search Engine' },
            // { value: 735, name: 'Direct' },
            // { value: 580, name: 'Email' },
            { value: 484, name: "Union C", itemStyle: { color: "#4CC87E" } },
            { value: 300, name: "Video D", itemStyle: { color: "#E0F5E8" } },
          ],
        },
      ],
    },
  },
]);
// 日期选择
const onRangeChange = (dates, dateStrings) => {
  console.log("dateStrings: ", dateStrings);
  console.log("dates: ", dates);
  if (dates) {
    console.log("From: ", dates[0], ", to: ", dates[1]);
    console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
  } else {
    console.log("Clear");
  }
};
const rangePresets = ref([
  {
    label: "Last 7 Days",
    value: [dayjs().add(-7, "d"), dayjs()],
  },
  {
    label: "Last 14 Days",
    value: [dayjs().add(-14, "d"), dayjs()],
  },
  {
    label: "Last 30 Days",
    value: [dayjs().add(-30, "d"), dayjs()],
  },
  {
    label: "Last 90 Days",
    value: [dayjs().add(-90, "d"), dayjs()],
  },
]);
//
const chartRef = ref(null);
let chartInstance = null;
onMounted(() => {
  nextTick(() => {
    const chartDom = chartRef.value;
    if (chartDom) {
      chartInstance = echarts.init(chartRef.value);
      chartInstance.setOption(getChartOption());
    }
  });
  window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  if (chartInstance != null) {
    chartInstance.dispose();
  }
});
watchEffect(() => {
  if (chartInstance) {
    chartInstance.resize();
  }
});
const getChartOption = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "06/29",
        "06/30",
        "07/01",
        "07/02",
        "07/03",
        "07/04",
        "07/05",
        "07/06",
        "07/07",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} 次",
      },
    },
    series: [
      {
        name: "下载量",
        type: "line",
        smooth: true,
        data: [1000, 800, 600, 1500, 1800, 2000, 1200, 1000, 1500],
      },
    ],
  };
};
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 导出数据
const exportDate = () => {
  console.log(111, "exportDate");
};

const doAction = (e, record) => {
  console.log(111, "start");
  console.log(e, "e");
  console.log(record, "record");
  if (e === "applyForRemoval") {
    console.log(1111, "applyForRemoval");
    applyForRemovalModal.value = true;
    // formRef.value.resetFields();
    // formState.screenshot =[]
  } else if (e === "update") {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      // state.selectedRowKeys = [];
    }, 1000);
  } else if (e === "delete") {
    console.log("delete: ", "delete");
    // Modal.confirm({
    // title: 'Are you sure delete this task?',
    // icon: createVNode(ExclamationCircleOutlined),
    // content: `Some descriptions + ${record.name }`,
    // okText: 'Yes',
    // okType: 'danger',
    // cancelText: 'No',
    // onOk() {
    //   console.log('OK',record);
    //   formRef.value
    //   .validate()
    //   .then(() => {
    //     console.log('values', formState, toRaw(formState));
    //     applyForRemovalModal.value = false
    //   })
    //   .catch(error => {
    //     console.log('error', error);
    //   });
    // },
    // onCancel() {
    //   console.log('Cancel');
    // },
    // });
  }
};

// 分页
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
<style scoped>
.margin20 {
  margin-top: 8px;
}
.dataOverview {
  height: 32px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bolder;
  font-size: 10px;
  /* color: #3c3c3c; */
  line-height: 32px;
  margin-left: 20px;
}
.a_col_date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* color: rgba(76, 200, 126, 1); */
}
.pic_title {
  text-align: center;
  font-weight: bolder;
  font-size: 18px;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  /* vertical-align: middle; */
  /* display: inline-block; */
  width: 10px;
  height: 10px;
}
</style>
